<template>
  <div class="card-box">
    <div class="clearfix box-container">
      <div class="pull-left box-title">{{ localTitle }}</div>
      <div class="pull-right tab-container" v-if="showTab">
        <div class="custom-tabs">
          <div
            v-for="tab in tabs"
            :key="tab.id"
            class="tab-item"
            :class="{ tabItemIsActive: tabItemIsActive === tab.id }"
            @click="handleTabClick(tab)"
          >
            <div class="tab-item-text">{{ tab.name }}</div>
          </div>
        </div>
      </div>
      <div class="pull-right box-time-range" v-if="showTimeRange">
        <div class="block">
          <el-date-picker
            v-model="dateRange"
            @change="handleDateChange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    showTab: {
      type: Boolean,
      default: false,
    },
    tabs: {
      type: Array,
      default: () => [],
    },
    timeRange: {
      type: Array,
      default: () => [],
    },
    tabItemIsActive: {
      type: String,
      default: "",
    },
    showTimeRange: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      localTitle: this.title,
      tabItemIsActive:
        this.tabs && this.tabs.length > 0 ? this.tabs[0].id : null,
      dateRange: this.timeRange,
    };
  },
  watch: {
    title(newVal) {
      this.localTitle = newVal;
    },
    timeRange(newVal) {
      this.dateRange = newVal;
    },
  },
  methods: {
    handleTabClick(tab) {
      this.tabItemIsActive = tab.id;
      this.localTitle = tab.name;
      this.$emit("tab-change", tab);
    },
    handleDateChange(val) {
      this.timeRange = val;
      this.$emit("date-change", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.card-box {
  .box-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 47px;
    background-image: url("@/assets/img/tab-bg.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .box-title {
    margin-top: -9px;
    font-size: 20px;
    color: #fff;
    line-height: 58px;
    margin: 0 20px 0px 20px;
    width: 220px;
  }
}

.tab-container {
  position: relative;
}
.custom-tabs {
  display: flex;
  align-items: center;
  position: relative;
  left: 50px;
  top: -10px;
}
.custom-tabs .tab-item {
  position: relative;
  top: 16px;
  width: 78px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s;
  background: #063c6a;
  &:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
  }
  &:last-child {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
  }
}

.custom-tabs .tabItemIsActive {
  background-image: url("@/assets/img/nav-item-bg.png");
  background-size: 100% 100%;
  width: 78px;
  height: 30px;
}
.box-time-range {
  margin-right: 0px;
  margin-top: 12px;
  .block {
    display: flex;
    align-items: center;

    :deep(.el-date-editor) {
      width: 320px;
      height: 24px;
      background: rgba(0, 24, 106, 0.35);
      border: 1px solid rgba(0, 150, 255, 0.3);
      display: flex;
      align-items: center;
      font-size: 12px;

      .el-range-input {
        height: 22px;
        color: #fff;
        background: transparent;
        line-height: 22px;
        font-size: 12px;
      }

      .el-range-separator {
        color: #fff;
        line-height: 22px;
        display: flex;
        align-items: center;
        font-size: 12px;
      }

      .el-range__icon,
      .el-range__close-icon {
        line-height: 22px;
        color: #fff;
        display: flex;
        align-items: center;
      }
    }
  }

  :deep(.date-picker-popper) {
    background: rgba(0, 24, 106, 0.9);
    border: 1px solid rgba(0, 150, 255, 0.3);
    font-size: 12px;

    .el-date-picker__header {
      color: #fff;
      font-size: 12px;
    }

    .el-date-picker__content {
      .el-date-table {
        th {
          color: #fff;
          font-size: 12px;
        }

        td {
          color: #fff;
          font-size: 12px;

          &.available:hover {
            color: #07ffe5;
          }

          &.current:not(.disabled) {
            color: #07ffe5;
            background-color: rgba(7, 255, 229, 0.1);
          }

          &.in-range {
            background-color: rgba(7, 255, 229, 0.1);
          }
        }
      }
    }

    .el-picker-panel__footer {
      .el-button {
        color: #fff;
        background: transparent;
        border-color: rgba(0, 150, 255, 0.3);
        font-size: 12px;

        &:hover {
          color: #07ffe5;
          border-color: #07ffe5;
        }

        &.el-button--primary {
          color: #07ffe5;
          border-color: #07ffe5;
          background: transparent;

          &:hover {
            background: rgba(7, 255, 229, 0.1);
          }
        }
      }
    }
  }
}
</style>